<template>
	<w-layout showTabbar showNavbar :navBack="false" navTitle="我的" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view @click="$u.route('/pages/mine/edit_info')" class="fr-ac">
					<view class="" style="position: relative;">
						<image style="width: 140rpx;height: 140rpx;border-radius: 50%;" :src="userStore.user_info.headimg" mode=""></image>
						<image v-if="userStore.user_info.vip_imgurl" :src="userStore.user_info.vip_imgurl" style="
							position: absolute;
							top: 0;
							left: 0;
							width: 140rpx;
							height: 140rpx;
							z-index: 10;
						" mode="widthFix"></image>
					</view>
					<view class="ml-30 flex-1">
						<view class="fr-ac">
							<view class="fs-32">
								{{userStore.user_info.nickname}}
							</view>
							<cut-corner arrow="3" clipSize="10rpx">
								<view class="color px-20 py-6 ml-30" style="background: #14495b;">
									LV {{userStore.user_info.vip.title}}
								</view>
							</cut-corner>
							<!-- <image class="ml-auto" style="width: 40rpx;height: 40rpx;" src="/static/icon/public/edit.png" mode=""></image> -->
						</view>
						<view class="mt-15 op-50">
							ID：{{userStore.user_info.ID}}
						</view>
					</view>
				</view>
				
				<view class="mt-50">
					<view class="px-4 py-4" style="border: 1px solid #0a2d3a;background: #00111b;">
						<view class="" :style="{'width': userStore.user_info.vip.jindu + '%'}" style="height: 12rpx;background: linear-gradient(to right,#205361 0%, var(--color) 100%);">
							
						</view>
					</view>
					<view class="fr-ac mt-20">
						<view class="fs-24 op-50">
							距离 LV{{userStore.user_info.vip.xia_title}} 还差{{userStore.user_info.vip.cha}}
						</view>
						<view @click="$u.route('/pages/mine/member_center')" class="ml-auto fr-ac">
							<view class="color mr-10">
								VIP权益
							</view>
							<image style="width: 32rpx;height: 32rpx;" src="/static/icon/public/right-fill.png" mode=""></image>
						</view>
					</view>
				</view>
				
				<view class="public-card-6 mt-50 px-50 py-50">
					<view class="fr-ac u-border-bottom pb-40" style="border-color: var(--gray-line) !important;">
						<view @click="$u.route('/pages/mine/yuan_bao')" class="flex-1 fc-ac">
							<view class="color fs-44">
								{{userStore.user_info.integral}}
							</view>
							<view class="fr-ac-jc mt-15">
								<image style="width: 32rpx;height: 32rpx;" src="/static/icon/public/yuan-bao.png" mode=""></image>
								<view class="mx-10">
									精粹
								</view>
								<image style="width: 32rpx;height: 32rpx;" src="/static/icon/public/right.png" mode=""></image>
							</view>
						</view>
						<view class="mx-50" style="background: var(--gray-line);height: 110rpx;width: 2rpx;"></view>
						<view @click="$u.route('/pages/mine/yuan_qi')" class="flex-1 fc-ac">
							<view class="color fs-44">
								{{userStore.user_info.score}}
							</view>
							<view class="fr-ac-jc mt-15">
								<image style="width: 32rpx;height: 32rpx;" src="/static/icon/public/yuan-qi.png" mode=""></image>
								<view class="mx-10">
									精气
								</view>
							</view>
						</view>
					</view>
					<view class="fr-ac-jsb mt-40">
						<view @click="goOrder(item)" class="fc-ac" v-for="(item,index) in order_btns" :key="index">
							<image style="width: 56rpx;height: 56rpx;" :src="item.icon" mode=""></image>
							<view class="mt-10 op-50">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				
				<view class="public-card-6 mt-50 px-50 py-50">
					<view class="fr-ac-jsb u-border-bottom pb-40 gap-40" style="border-color: var(--gray-line) !important;">
						<view @click="goBtn1(item)" class="fc-ac flex-1" v-for="(item,index) in func_btns_1" :key="index">
							<image style="width: 56rpx;height: 56rpx;" :src="item.icon" mode=""></image>
							<view class="mt-10 op-50">
								{{item.name}}
							</view>
						</view>
					</view>
					<swiper @change="swiperChange" :autoplay="false" class="w-100 mt-40" style="height: 100rpx;">
						<swiper-item>
							<view class="fr-ac-jsb gap-40">
								<view @click="goBtn2(item)" class="fc-ac flex-1" v-for="(item,index) in func_btns_2.slice(0,4)" :key="index">
									<image style="width: 40rpx;height: 40rpx;" :src="item.icon" mode=""></image>
									<view class="mt-10 op-50 fs-24">
										{{item.name}}
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="fr-ac-jc gap-40">
								<view @click="goBtn2(item)" class="fc-ac flex-1" v-for="(item,index) in func_btns_2.slice(4,8)" :key="index">
									<image style="width: 40rpx;height: 40rpx;" :src="item.icon" mode=""></image>
									<view class="mt-10 op-50 fs-24">
										{{item.name}}
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="fr-ac-jc mt-10">
						<view class="fr-ac-jc" style="background: #00111B;">
							<view class="transition" :class="0==swiper.current?'mr-30':'ml-30'" style="width: 38rpx;height: 4rpx;background: #66E9FF;border-radius: 0rpx 0rpx 0rpx 0rpx;">
								
							</view>
						</view>
					</view>
				</view>
				
				<view class="public-card-10 mt-50 px-50 py-50" style="min-height: 670rpx;">
					<view class="fr-ac">
						<view class="fs-32">
							任务
						</view>
						<view class="ml-auto fr-ac">
							<view @click="$u.route('/pages/mine/task')" class="mr-10 op-50">
								全部任务
							</view>
							<image style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right.png" mode=""></image>
						</view>
					</view>
					
					<view class="pt-10">
						<view class="mt-50" v-for="(item,index) in state.list" :key="index">
							<view class="fr-ac">
								<view class="circle">
									<view class="circle_left ab" :style="renderLeftRate(getNum(item.ywc_count,item.number))"></view>
									<view class="circle_right ab" :style="renderRightRate(getNum(item.ywc_count,item.number))"></view>
									<view class="circle_text fr-ac-jc h-100">
										<view class="fs-24">{{getNum(item.ywc_count,item.number)}}%</view>
									</view>
								</view>
								<view class="ml-15 flex-1">
									<view class="fr-ac">
										<view class="">
											{{item.title}}
										</view>
										<template v-if="item.money_type == 1">
											<image class="ml-30" style="width: 32rpx;height: 32rpx;" src="/src/static/icon/public/yuan-qi.png" mode=""></image>
											<view class="ml-10">
												+{{item.z_number}}
											</view>
										</template>
										<template v-if="item.money_type == 2">
											<image class="ml-30" style="width: 32rpx;height: 32rpx;" src="/src/static/icon/public/yuan-bao.png" mode=""></image>
											<view class="ml-10">
												+{{item.yb_number}}
											</view>
										</template>
										
										<view v-if="item.is_complete == 2" class="ml-auto fr-ac">
											<view class="color op-50 mr-10">
												已完成
											</view>
											<image style="width: 32rpx;height: 32rpx;" src="/static/icon/public/success.png" mode=""></image>
										</view>
										<view v-if="item.is_complete == 1" @click="receiveApi(item)" class="ml-auto fr-ac">
											<view class="color">
												领取
											</view>
										</view>
										<view v-if="item.is_complete == 0" @click="$u.route('/pages/index/index')" class="ml-auto fr-ac">
											<view class="color mr-10">
												去完成
											</view>
											<image style="width: 32rpx;height: 32rpx;" src="/static/icon/public/right-fill.png" mode=""></image>
										</view>
										
									</view>
									<view class="op-50 mt-10 fs-24">
										{{item.ywc_count}}/{{item.number}}
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
				
				<view class="t-c py-30">
					皖ICP备2025089770号-2A
				</view>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		debounce
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,onShow
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		get_user,
		ling_task,
		extension
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
	})
	onShow(()=>{
		getInfo()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		debounce(function(){
			page.scrollTop = e.scrollTop
		},500)()
	})
	async function getInfo(){
		const user = await get_user()
		Object.assign(userStore.user_info,user.userinfo)
		state.list = user.task_list
	}
	function getNum(num1,num2){
		return Math.round(Number(num1) / Number(num2) *100) 
	}
	async function receiveApi(item){
		const res = await ling_task({
			task_list_id: item.id
		})
		uni.$u.toast('领取成功！')
		get_task_list()
	}
	
	// 轮播
	const swiper = reactive({
		current:0,
	})
	function swiperChange(e){
		swiper.current = e.detail.current
	}
	
	const page = reactive({
		scrollTop:0
	})
	
	const popup = reactive({
		showSign:false,
	})
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	
	const order_btns = ref([
		{
			id:'',
			name:'待发货',
			icon:'/static/icon/public/order-1.png',
			url: '/pages/order/list?current=1'
		},
		{
			id:'',
			name:'待收货',
			icon:'/static/icon/public/order-2.png',
			url: '/pages/order/list?current=2'
		},
		{
			id:'',
			name:'已完成',
			icon:'/static/icon/public/order-3.png',
			url: '/pages/order/list?current=3'
		},
		{
			id:'',
			name:'全部订单',
			icon:'/static/icon/public/order-4.png',
			url: '/pages/order/list?current=0'
		}
	])
	
	const func_btns_1 = ref([
		{
			id:1,
			name:'商城',
			icon:'/static/icon/public/func-btn1-1.png',
			url: '/pages/shopping/goods'
		},
		{
			id:2,
			name:'券商城',
			icon:'/static/icon/public/func-btn1-2.png',
			url: '/pages/shopping/coupons'
		},
		{
			id:3,
			name:'团队中心',
			icon:'/static/icon/public/func-btn1-3.png',
			url: ''
		},
		{
			id:4,
			name:'许愿合成',
			icon:'/static/icon/public/func-btn1-4.png',
			url: '/pages/conflate/index'
		}
	])
	
	const func_btns_2 = ref([
		{
			id:1,
			name:'消费记录',
			icon:'/static/icon/public/func-btn2-1.png',
			url: '/pages/mine/consume_history'
		},
		{
			id:2,
			name:'用户须知',
			icon:'/static/icon/public/func-btn2-2.png',
			url: ''
		},
		{
			id:3,
			name:'客服',
			icon:'/static/icon/public/func-btn2-3.png',
			url: ''
		},
		{
			id:4,
			name:'我的收藏',
			icon:'/static/icon/public/func-btn2-4.png',
			url: '/pages/mine/collect'
		},
		{
			id:5,
			name:'设置',
			icon:'/static/icon/public/func-btn2-5.png',
			url: '/pages/mine/setting'
		}
	])
	async function goBtn1(item){
		if(item.id == 3){
			const res = await get_extension()
			if(res.is_extension != 1){
				uni.navigateTo({
					url: '/pages/team/apply'
				})
			}else{
				uni.navigateTo({
					url: '/pages/team/index'
				})
			}
		}
		if(item.url){
			uni.navigateTo({
				url:item.url
			})
		}
	}
	function goBtn2(item){
		if(item.url){
			uni.navigateTo({
				url:item.url
			})
		}else{
			switch (item.id){
				case 2:
					uni.navigateTo({
						url:`/pages/parse/parse?type=20&title=用户须知`
					})
					break;
				case 3:
					plus.runtime.openURL("https://work.weixin.qq.com/kfid/kfcd4716523f289b07d")
					break;
				default:
					break;
			}
		}
		
	}
	
	const renderRightRate = (rate) => {
		if (rate < 50) {
			return 'transform: rotate(' + 3.6 * rate + 'deg);';
		} else {
			return 'transform: rotate(0);border-color: var(--color);';
		}
	}

	const renderLeftRate = (rate) => {
		if (rate >= 50) {
			return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';
		}
	}
	
	
	function goOrder(item){
		uni.navigateTo({
			url:item.url
		})
	}
	
	
	async function get_extension(){
		const res = await extension({})
		return res
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 40rpx;
		
	}
	
	.circle {
	    width: 80rpx;
	    height: 80rpx;
	    position: relative;
	    border-radius: 50%;
	    box-shadow: inset 0 0 0 5rpx var(--color);
	
	    .ab {
	        position: absolute;
	        left: 0;
	        right: 0;
	        top: 0;
	        bottom: 0;
	        margin: auto;
	    }
	
	    &_left {
	        border: 5rpx solid #000;
	        border-radius: 50%;
	        /* 更正！！！
	        之前使用clip是可以正常的，但现在clip被弃用，推荐使用clip-path，但是这个属性和clip-path有些微的不同
	        使用clip-path应该更改为： clip-path: inset(0 40rpx 0 0);
	        */
	        clip: rect(0, 40rpx, 80rpx, 0);
	    }
	
	    &_right {
	        border: 5rpx solid #000;
	        border-radius: 50%;
	        // 使用clip-path应该更改为： clip-path: inset(0 0 0 40rpx);
	        clip: rect(0, 80rpx, 80rpx, 40rpx);
	    }
	}
</style>